<template>
	<view class="login-img">
		<view class="login-box">
			<view class="login-item">
				<view class="logo-img">
					<image src="../../static/img/logo.png" mode="widthFix"></image>
				</view>
				<view class="logo-Text">
					<image src="../../static/img/logo-text.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="UserInputBox">
				<view class="input-item">
					<view class="zh-img">
						<image src="../../static/icon/icon-zh.png" mode="widthFix"></image>
					</view>
					<uv-input placeholder="请输入大屏编码" border="" v-model="Form.machineCode"></uv-input>
				</view>
				<view class="input-item">
					<view class="zh-img">
						<image src="../../static/icon/icon-suo.png" mode="widthFix"></image>
					</view>
					<uni-data-select :localdata="range" @change="change" placeholder="请选择账套" v-model="value"
						class="no-border-select"></uni-data-select>
				</view>
				<view class="group-box">
					<uv-checkbox-group :modelValue="rememberPassword ? ['记住密码'] : []" @change="handleRememberChange">
						<uv-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList"
							:key="index" :label="item.name" :name="item.name"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>
			<view class="logon-ben" @click="handleBen">
				登录
			</view>


		</view>
	</view>
</template>

<script>
	import {
		$get,
	} from '@/utils/request';
	export default {
		data() {
			return {
				rememberPassword: false, // 直接使用布尔值状态
				checkboxList: [{
					name: '记住密码',
					disabled: false
				}],
				value: "",
				range: [],
				Form: {
					machineCode: '',
					companyCode: ''
				}
			};
		},
		onLoad() {
			// 获取是否记住密码
			if (uni.getStorageSync('rememberPassword')) {
				this.rememberPassword = true;
				const savedData = uni.getStorageSync('loginFormData');
				if (savedData) {
					this.Form = {
						machineCode: savedData.machineCode || '',
					};
					this.value = savedData.companyCode || ''
					this.change(savedData.companyCode)
				}
			}
		},
		onShow() {
			this.getAccountList()
		},
		methods: {
			// 获取账套
			getAccountList() {
				$get('quality/app/getAccount').then(res => {
					if (res.data && Array.isArray(res.data)) {
						this.range = res.data.map(item => ({
							value: item.companyCode,
							text: item.companyName
						}));

					}

				})

			},
			handleRememberChange(e) {
				this.rememberPassword = e.length > 0;
				if (this.rememberPassword) {
					uni.setStorageSync('loginFormData', this.Form);
					uni.setStorageSync('rememberPassword', true);
				} else {
					uni.removeStorageSync('loginFormData');
					uni.removeStorageSync('rememberPassword');
				}
			},
			handleBen() {
				if (!this.Form.machineCode) {
					uni.showToast({
						title: '请输入大屏编码',
						icon: 'none',

					});
					return;
				}

				if (!this.Form.companyCode) {
					uni.showToast({
						title: '请选择账套',
						icon: 'none',
					});
					return;
				}


				console.log(this.Form);
				$get('quality/bigScreenApp/login', this.Form).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.setStorageSync('companyCode', res.companyCode);
						uni.setStorageSync('machineName', res.machineName);
						uni.setStorageSync('machineCode', res.machineCode);
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						uni.switchTab({
							url:'/pages/index/index'
						})
				


					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
					}

				})
			},
			change(e) {
				this.Form.companyCode = e
			},
		}
	}
</script>

<style lang="less">
	.login-img {
		width: 100vw;
		height: 100vh;
		background-image: url("../../static/img/login-img.png.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;


		.login-box {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 40rpx;

			.login-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;

				.logo-img {
					width: 120rpx;

					image {
						width: 100%;
					}
				}



				.logo-Text {
					width: 200rpx;

					image {
						width: 100%;
					}
				}
			}

			.UserInputBox {
				width: 80%;
				padding: 30rpx 0;
				display: flex;
				flex-direction: column;
				gap: 30rpx;

				.input-item {
					width: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #ccc;
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin: 20rpx 0;

					.zh-img {
						width: 30rpx;

						image {
							width: 100%;
						}
					}

					/* 去掉组件的边框和阴影 */
					.no-border-select /deep/ .uni-select {
						border: none !important;
						box-shadow: none !important;
					}

					/* 去掉输入框部分的边框（根据实际渲染结构调整） */
					.no-border-select /deep/ .uni-input-input {
						border: none !important;
						border-bottom: none !important;
						/* 如果有下划线也去掉 */
					}

					/* 可选：去掉聚焦状态的边框 */
					.no-border-select /deep/ .uni-input-input:focus {
						border: none !important;
						box-shadow: none !important;
					}
				}

				.group-box {
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
			}

			.logon-ben {
				width: 80%;
				padding: 30rpx;
				text-align: center;
				border-radius: 50rpx;
				color: #fff;
				font-size: 18px;
				background: linear-gradient(to right, #005aca 0%, #0096ca 100%);
			}
		}




	}
</style>